const template = (`
    <div class="todo-footer">
        <label>
          <input type="checkbox" @change="finishAll($event)" :checked="allFinished" />
        </label>
        <span>
          <span>已完成{{finished}}</span> / 全部{{total}}
        </span>
        <button @click="$bus.$emit('delete')" class="btn btn-danger">清除已完成任务</button>
      </div>
`);
export default {
    template,
    props:['task-list','delete-all','finish-all'],
    computed:{
        total(){
            return this.taskList.length
        },
        finished(){
            return this.taskList.filter(item=>{
                return item.isChecked === true;
            }).length;
        },
        allFinished() {
            return (this.finished === this.total && this.total !== 0)
        }
    },
    mounted(){
        this.$bus.$on('delete',()=>{
            this.deleteAll();
        });
    }
}